// 提现记录页面
import React, { Component } from 'react'
import { Container, Content } from 'native-base'
import { View, Text, DeviceEventEmitter } from 'react-native'
import HeaderWhite from '../../../components/header/headerWhite'
import Iconfont from '../../../components/iconfont'
import Forbiduser from '../../../components/forbiduser'
import PayTimeRule from './components/payTimeRule'
import commonStyle from '../../../libs/commonStyle'
import API from '../../../api/request'
import TableHead from '../../../components/tableHead'
import TipsCom from '../../../components/dialog/tips'
import { format } from '../../../libs/date'
import { connect } from 'react-redux'

let statusList = ['待支付', '已支付', '拒绝支付', '提现失败']
class WithdrawRecord extends Component {
	constructor(props) {
		super(props)
		this.state = {
			list: [
				{
					title: '时间',
					flex: 2
				},
				{
					title: '金额',
					flex: 2
				},
				{
					title: '状态',
					flex: 1
				}
			],
			
			tipsVisible: false,
			tipsContent: '',

			tableList: []
		}
	}
	componentDidMount() {
		this.apiData()
		DeviceEventEmitter.addListener('forbid.user', () => {
			global.Pop.show(<Forbiduser wechat={this.props.serviceInfo.wechat} />,{animationType: 'slide-up'})
		})
	}
	showTips(text) {
		this.setState({
			tipsVisible: true,
			tipsContent: text
		})
		setTimeout(() => {
			this.setState({
				tipsVisible: false
			})
		}, 1000)
	}
	
	async apiData() {
		const url = '/api/order/withdraw/list'
		let res = await API.post(url)
		if (res && res.code === '200') {
			let list = (res.data && res.data.withdraws) || []
			this.setState({
				tableList: list
			})
		}
	}
	render() {
		const { tableList, list } = this.state
		const { serviceInfo, homeStat } = this.props
		const { totalWithdrawal } = homeStat
		return (
			<Container>
				<HeaderWhite title="提现记录" hasLeft />
				<Content>
					<View
						style={[
							commonStyle.p30,
							commonStyle.flexItem,
							commonStyle.flexCenter,
							commonStyle.border
						]}
					>
						<Text style={[commonStyle.f30, { color: '#444' }]}>
							累计提现
						</Text>
						<View
							style={[
								commonStyle.flexRow,
								commonStyle.mt20,
								commonStyle.flexVerticalCenter
							]}
						>
							<Iconfont name="money4" size={10} color="#666" />
							<Text
								style={[
									commonStyle.f36,
									commonStyle.fontBold,
									commonStyle.ml10
								]}
							>
								{totalWithdrawal || '0.00'}
							</Text>
						</View>
					</View>
					<Text
						style={[
							commonStyle.colorBlackLight,
							commonStyle.pt40,
							commonStyle.pl20,
							commonStyle.pb10,
							commonStyle.f30
						]}
					>
						提现记录：
					</Text>
					<View>
						<TableHead list={list} />
						{ tableList.map(item => {
							return (
								<View
									style={[
										commonStyle.flexRow,
										commonStyle.borderBottom,
										commonStyle.p20
									]}
								>
									<View style={[commonStyle.flexCenter, {flex: list[0].flex}]}> 
										<Text style={[commonStyle.colorGray, commonStyle.f22]}>
											{item.time}
										</Text>
									</View>
									<View style={[commonStyle.flexCenter, {flex: list[1].flex}]}> 
										<Text style={[commonStyle.colorGray, commonStyle.f22]}>
											{item.money}
										</Text>
									</View>
									<View style={[commonStyle.flexCenter, {flex: list[2].flex}]}> 
										<Text style={[commonStyle.colorGray, commonStyle.f22]}>
											{statusList[item.start]}
										</Text>
									</View>
								</View>
							)
						})}
					</View>
					<View style={[commonStyle.mt40, commonStyle.p20]}>
						<PayTimeRule showTips={this.showTips.bind(this)} info={serviceInfo} />
					</View>
					<TipsCom 
						onClose={() => {
							this.setState({
								tipsVisible: false
							})
						}}
						visible={this.state.tipsVisible} 
						content={this.state.tipsContent} />
				</Content>
			</Container>
		)
	}
}

export default connect(state => ({
	serviceInfo: state.login.serviceInfo,
	homeStat: state.login.homeData
}))(WithdrawRecord)
